<template>
    <div id="proj-config">
        <basicOpt />
        <innovOpt title="大创计划配置" model-name="InnoVOption" id="innov" />
        <innovOpt title="校长基金配置" model-name="PrinFOption" id="prinf" />
        <innovOpt title="拔尖贵仪配置" model-name="ValuEOption" id="value" />
        <innovOpt title="实验室开放项目配置" model-name="OpenLOption" id="openl" />
    </div>
    <a-anchor :get-container="() => containerRef" :items="anchor" class="affix-location" :target-offset="48"></a-anchor>
</template>

<script setup>
import { inject, reactive } from 'vue';
import basicOpt from './basic-opt.vue';
import innovOpt from './innov-opt.vue';

const anchor = [
    {
        key: "basic",
        href: "#basic",
        title: "总体配置",
    },
    {
        key: "innov",
        href: "#innov",
        title: "大创计划配置",
    },
    {
        key: "prinf",
        href: "#prinf",
        title: "校长基金配置",
    },
    {
        key: "value",
        href: "#value",
        title: "拔尖贵仪配置",
    },
    {
        key: "openl",
        href: "#openl",
        title: "实验室开放项目配置",
    },
];
const containerRef = inject("app-container");
</script>

<style lang="less">
#proj-config {
    margin: 0px 180px 0px 16px;
    min-height: 1000px;

    h1 {
        color: @blue-8;
        padding: 16px 0px 8px 0;
        border-bottom: @blue-8 2px solid;
        font-weight: bold;
    }

    .option-item {
        .title {
            padding-top: 10px;
            text-align: right;
        }

        .content {
            padding: 10px 0 16px 8px;
            .ant-form-show-help {
                margin-top: 4px;
            }
        }
    }
}

.affix-location {
    position: absolute;
    top: @content-affix-top;
    right: 24px;
}
</style>